<template>
  <el-dialog
    id="preview"
    :visible="previewDialog"
    v-bind="$attrs"
    v-on="$listeners"
    @close="close"
    title="文章预览"
  >
    <div class="title">
      <h2>{{ previewItem.title }}</h2>
      <div>
        <span>{{ previewItem.createTime | formatTime }}</span>
        <span>{{ previewItem.username }}</span>
        <span class="el-icon-view"></span>
        <span>{{ previewItem.visits }}</span>
      </div>
    </div>
    <div id="content" v-html="previewItem.articleBody"></div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    previewDialog: {
      type: Boolean,
      require: true
    },
    previewItem: {
      type: Object,
      require: true
    }
  },
  filters: {
    // 格式化时间
    formatTime (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    close () {
      this.$emit('update:previewDialog', false)
    }
  }
}
</script>

<style scoped lang='less'>
#preview {
  .el-dialog__body {
    overflow: hidden;
    width: 100%;
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    .title {
      border-bottom: 1px dashed #ccc;
      padding-bottom: 10px;
      span {
        margin-left: 10px;
        margin-top: 10px;
      }
    }
  }
}
#content {
  background: #f5f5f5;
  padding: 10px;
  ::v-deep img {
    width: 100% !important;
  }
}
</style>
